<template>
    <div class="register">
        <div class="regs"></div>
        <div class="sign">
             <div class="sign-in">
                <div class="h3">{{$t('langs.register')}}</div>
                <div class="input-box">
                    <span>{{$t('langs.name')}}</span>
                    <div class="telephone">
                        <input type="text" maxlength="11" class="input1" style=" border: 1px solid #000;" v-model="name">
                    </div>
                </div>
                <div class="input-box">
                    <span>{{$t('langs.phone')}}</span>
                    <div class="telephone">
                        <input type="text" maxlength="11" class="input1" style=" border: 1px solid #000;" v-model="tel">
                    </div>
                </div>
                <div class="input-box">
                    <span>{{$t('langs.em')}}</span>
                    <div class="telephone">
                        <input type="text" maxlength="11" class="input1" style=" border: 1px solid #000;" v-model="email">
                    </div>
                </div>
                <div class="input-box">
                    <span>{{$t('langs.pawd1')}}</span>
                    <div class="telephone">
                        <input type="text" maxlength="16" class="input1" style=" border: 1px solid #000;" v-model="pwass">
                    </div>
                </div>
                <div class="input-box">
                    <span>{{$t('langs.pawd2')}}</span>
                    <div class="telephone">
                        <input type="text" class="input1" maxlength="16" style=" border: 1px solid #000;" v-model="newpawss">
                    </div>
                </div>
                <div style="margin: 8px 0 26px 0;">
                    <el-checkbox v-model="checked">{{$t('langs.regagree')}}</el-checkbox>
                </div>
                <button @click="Signin">{{$t('langs.land')}}</button>
                <div class="forget"><span>{{$t('langs.account')}}</span><span @click="tologin">{{$t('langs.go')}}</span></div>
            </div>
        </div>
    </div>
</template>

<script>
import {POST}from "@/api/home.js"

export default {
    data() {
        return {
            checked: false, //是否同意协议
            name: '', //用户名
            email: '', //邮箱
            tel: '' ,//电话号码
            pwass: '',//设置密码
            newpawss: '',//确认密码
            code: ''//验证码
        }
    },
    methods: {
        Signin(){//注册
            let nickName = this.name
            let tel = this.tel
            let email = this.email
            let password  = this.newpawss
            let verification = this.code

            if(this.verifications(this.name,this.email,this.tel,this.pwass,this.newpawss,this.checked)) {
                POST('/userInfo/register',{
                    nickName: nickName,
                    tel: tel,
                    email: email,
                    password: password,
                    verification: verification
                }).then(res=>{
                    console.log(res)
                    let data = res.data
                    if(data.code==0){
                        this.$msgsuccess(this.$t('langs.zc'));
                        this.$cookies.set("token",data.token,"1d")
                        this.$cookies.set("userinformation",data.result,"1d")
                        this.$cookies.set("loginid",1,"1d")
                        this.$router.push({
                            path: '/'
                        })
                    }
                    if(data.code==-1) {
                        this.$msg( data.message);
                    }
                })
            }
        },
        tologin() {
            this.$router.push({
                path: '/login'
            })
        },
        verifications(name,email,tel,pwass,newpawss,checked) {
            if(name == '') {
               this.$msg(this.$t('langs.Tips.name'));
                return false;
            }
            if(tel == '') {
                this.$msg(this.$t('langs.Tips.teltips2'));
                return false;
            }
            let  myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(tel)) {
                this.$msg(this.$t('langs.Tips.teltips1'));
                return false;
            } 
            if(email == '') {
                this.$msg(this.$t('langs.Tips.emtips'));
                return false;
            }
            if(/^[\u0391-\uFFE5]+$/.test(email)) {
               this.$msg(this.$t('langs.Tips.emtips1'));
                return false;
            }
            if(pwass == '') {
                 this.$msg(this.$t('langs.Tips.pawdtips1'));
                return false;
            }
            if(/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}$/.test(pwass)) {
                 this.$msg(this.$t('langs.Tips.pawdtips2'));
                return false;
            }
            if(newpawss == '') {
                this.$msg(this.$t('langs.Tips.pawdtips3'));
                return false;
            }
            if(/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}$/.test(newpawss)) {
                this.$msg(this.$t('langs.Tips.pawdtips4'));
                return false;
            }
            if(pwass !== newpawss){
                this.$msg(this.$t('langs.Tips.pawdtips5'));
                return false;
            }
            if(checked===false) {
                this.$msg(this.$t('langs.Tips.regtips'));
                return false
            }
            return true
        }
    },
    mounted() {
        this.code = this.$route.query.code
    },
}
</script>

<style lang='scss'>

.register {
    .regs {
        width: 100%;
        height: 165px;
        background: #000;
    }
    .sign {
        width: 100%;
    }
    .sign-in {
        width: 545px;
        color: #101010;
        margin: 0 auto;
        padding: 50px 0;
        >.h3 {
            text-align: center;
            font-size: 28px;
            
        }
        .input-box {
            margin-top: 12px;
            >span {
                font-size: 12px;
                padding-left: 3px;
            }
            .telephone {
                position: relative;
                margin-top: 6px;
                >.input1 {
                    width: 502px;
                    height: 40px;
                    outline: none;
                    padding: 0 20px;
                    letter-spacing:5px;
                }
                .note {
                    width: 253px;
                    height: 40px;
                    outline: none;
                    padding-left: 8px;
                    border: 1px solid #000;
                }
                .note1 {
                    width: 98px;
                    font-size: 14px;
                    height: 40px;
                    border: 1px solid #000;
                    text-align: center;
                    line-height: 40px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    cursor: pointer;
                }
            }
            
        }
        .forget {
            text-align:center;
            font-size: 14px;
            margin-top: 44px;
            cursor: pointer;
            >span:nth-child(1) {
                color: #999;
                margin-right: 4px;
            }
            >span:nth-child(2) {
                color: #000;
            }
        }
        button {
            width: 371px;
            height: 44px;
            background: #000;
            color: #fff;
            border-radius: 4px;
            outline: none;
            cursor: pointer;
            margin-left: 64px;
        }
    }
  
}
.el-select {
    width: 95px;
    border: 1px solid #000;
}
.el-select .el-input__inner:focus {
    border: none;
}
.el-input__inner {
    border:none;
    font-size: 12px;
    padding: 0 10px 0 37px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: #333;
    background: #333;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #101010;
}
.el-checkbox__inner {
    border-radius: 50%;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #333;
}
.el-checkbox__label {
    font-size: 12px;
}
</style>